const {watch} = Vue;

/**
 * 新增/编辑弹窗组件
 * @param app
 * @returns {*}
 * @constructor
 */
const AddPop = {
    emits: ['close-add', 'submit-add'],
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        handleType: Number, // 0-add 1-edit
        pet: {
            type: Object,
            default: () => ({
                name: '',
                owner: '',
                phone: ''
            })
        }
    },
    setup(props, { emit }) {
        const handleSubmit = () => {
            emit('submit-add')
        };

        const handleCancel = () => {
            emit('close-add')
        };

        const handleNameChange = (val) => {
            if (val.length > 20) {
                props.pet.name = val.trim().substring(0, 20);
            }
        };

        const handleOwnerChange = (val) => {
            if (val.length > 20) {
                props.pet.owner = val.trim().substring(0, 20);
            }
        };

        watch(() => props.pet.name, handleNameChange);
        watch(() => props.pet.owner, handleOwnerChange);

        return {
            handleSubmit,
            handleCancel
        };
    },
    template: `
        <div class="add-mask" :class="{'visible': visible}">
            <div class="add-dialog">
                <h3 class="add-head">{{ handleType? '编辑寄存':'新增寄存' }}</h3>
                <div class="add-body">
                    <div class="add-item">
                         <label for="pet-name">宠物名称</label>
                         <input type="text" id="pet-name" v-model="pet.name">
                    </div> 
                    <div class="add-item">
                         <label for="pet-owner">主人姓名</label>
                         <input type="text" id="pet-owner" v-model="pet.owner">
                    </div> 
                    <div class="add-item">
                         <label for="pet-phone">联系方式</label>
                         <input type="text" id="pet-phone" v-model="pet.phone">
                    </div>  
                </div>
                <div class="handle-box">
                     <button id="save-button" class="handle-button" @click="handleSubmit">提交</button>
                     <button id="cancel-button" class="handle-button cancel-button" @click="handleCancel">取消</button>       
                </div>
            </div>
        </div>
    `,
};
